<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#divA {
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
				padding: 10px;
			}

			#divB {

				width: 100px;
				height: 100px;
				background-color: lightblue;
				padding: 10px;
			}

			#divC {

				width: 50px;
				height: 50px;
				background-color: lightgoldenrodyellow;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="divA">
			<div id="divB">
				<div id="divC">
					C
				</div>
				B
			</div>
			A
		</div>
		<script>
			divA.onclick = function() {
				alert("A被点击了")
			}
			divB.onclick = function() {
				alert("B被点击了")
			}
			divC.onclick = function() {
				alert("C被点击了")
				event.stopPropagation();
		    }

			//divA.addEventListener("click", function() {
			//		alert("A被点击了")
			//	},true)
			//	divB.addEventListener("click", function() {
				//		alert("B被点击了")
				//	},true)
				//	divC.addEventListener("click", function() {
				//			alert("C被点击了")
				//		},true)
				
				
				//event.stopPropagation() 停止继续传递
				//event.preventDefault() 取消默认处理
		</script>
	</body>
</html>
